<template>
  <div>
      <h3 class="text-left" v-show="flage" @click="ala">
        <i class="glyphicon glyphicon-menu-right"></i>
        <i class="glyphicon glyphicon-menu-right"></i>
        <i class="glyphicon glyphicon-menu-right"></i>
        <i class="glyphicon glyphicon-menu-right"></i>
        <i class="glyphicon glyphicon-menu-right"></i>
        <i class="glyphicon glyphicon-menu-right"></i>&nbsp;&nbsp;&nbsp;tab切换组件
      </h3>
      <h3 class="text-left" v-show="!flage" @click="ala">
        <i class="glyphicon glyphicon-menu-down"></i>
        <i class="glyphicon glyphicon-menu-down"></i>
        <i class="glyphicon glyphicon-menu-down"></i>
        <i class="glyphicon glyphicon-menu-down"></i>
        <i class="glyphicon glyphicon-menu-down"></i>
        <i class="glyphicon glyphicon-menu-down"></i>
      </h3>
      <div v-show="!flage">
        <h1>掉用组件</h1>
        <img src="../assets/tab-html.png" alt="">
        <br>
        <h1>封装组件</h1>
        <img src="../assets/tab-js.png" alt="">
      </div>
  </div>
</template>
<script>
  export default{
      data(){
          return{
            flage:true,
          }
      },
    methods:{
      ala(){
        this.flage=!this.flage
      }
    }
  }
</script>
<style>

</style>
